<template>
	<view>
		<view class="page">
			<view class="logo">
				<image :src="this_app_config.app_logo" mode="aspectFill" class="xcx_logo"></image>
			</view>
			<view class="info">
				<view class="tit">请先完善头像和昵称</view>
			</view>
			<form @submit="formSubmit">
				<view class="form_box">
					<view class="form_item">
						<view class="label">微信头像</view>
						<button class="avatar-wrapper flex-1" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image class="avatar" :src="avatar" mode="aspectFill"></image>
							<view class="mask flex items-center justify-center">
								<u-icon name="camera" color="#fff" size="28"></u-icon>
							</view>
						</button>
					</view>

					<view class="form_item">
						<view class="label">微信昵称</view>
						<input type="nickname" class="input" name="nickname" :value="nickname" placeholder="请输入昵称" />
					</view>
				</view>
				<view class="btn_box">
					<button type="primary" form-type="submit">确认登录</button>
					<button type="default" @click="onNotLogin">暂不登录</button>
				</view>
			</form>
		</view>

		<!-- <view class="agree">
			<view class="con">
				<view class="icon_check" @click="check_fun" v-if="check">
					<u-icon name="checkmark-circle-fill"></u-icon>
				</view>
				<view class="icon" @click="check_fun" v-else>
					<u-icon name="checkmark-circle"></u-icon>
				</view>
				<text class="txt">同意</text>
				<text class="link" @click="goXieyiDetail('xieyi')">《用户服务协议》</text>和
				<text class="link" @click="goXieyiDetail('yinsi')">《隐私政策》</text>
			</view>
		</view> -->

		<view class="tMask" v-if="isShowPhoneBind">
			<view class="tMaskBox">
				<view class="tMaskTitle">绑定手机号码</view>
				<view class="tMaskBoxCon">
					<view>为了提供更好的服务</view>
					<view style="padding-bottom:50rpx;">请绑定微信手机号码</view>
					<button type="primary" @getphonenumber="onGetPhoneNumber" openType="getPhoneNumber">我知道了</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('../../common/util.js');
	const upload_url = require('../../common/data.js');
	export default {
		data() {
			return {
				avatar: '',
				nickname: '',
				this_app_config: {},
				isShowPhoneBind: false,
				this_user_code: ''
			};
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			loadData: function() {
				let that = this;
				var requsetData = {};
				util.requestPost(
					'/WeixinMpLogin/authIndex',
					requsetData,
					function(res) {
						that.this_app_config = res.data.this_app_config;
						wx.login({
							success: function(res) {
								that.this_user_code = res.code;
							},
							fail: function(res) {
								console.log(res);
								wx.showModal({
									title: '提示',
									content: '授权登陆失败，请返回重试',
									showCancel: false
								});
								return false;
							}
						});
					},
					'', {
						isShowLoading: false
					}
				);
			},
			onChooseAvatar(e) {
				var file_url = e.detail.avatarUrl;
				var that = this;
				uni.uploadFile({
					url: upload_url.jubao_url_prefix + '/upload/uploadImg', // 仅为示例，非真实的接口地址
					filePath: file_url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						let data = JSON.parse(res.data);
						that.avatar = data.data.path;
					}
				});
			},
			formSubmit(e) {
				let _this = this;
				let param = e.detail.value
				param.avatar = this.avatar
				util.requestPost(
					'/WeixinMpLogin/loginUserInfo',
					param,
					function(res) {
						wx.setStorageSync("sh2022_web_user_utoken", res.data.utoken);
						wx.setStorageSync('user_id', res.data.user_id);
						//用户信息授权成功后，授权手机号码，重新生成code
						wx.login({
							success: function(res) {
								_this.this_user_code = res.code;
								_this.isShowPhoneBind = true;
							},
							fail: function(res) {
								_this.$toast('授权登陆失败，请重试');
								_this.loadData();
							}
						});
					},
					'', {
						isShowLoading: false
					}
				);
			},
			//绑定手机号码
			onGetPhoneNumber: function(e) {
				let _this = this;
				var requestData = e.detail;
				requestData.code = _this.this_user_code;
				util.requestPost('/WeixinMpLogin/updateUserPhone', requestData, function(res) {
					_this.onNavigateBack(1);
				}, '', {
					completeAfter: function(res) {
						if (res.code == 0) {
							_this.loadData();
						}
					},
					isShowLoading: false
				});
			},
			onNavigateBack(delta = 1) {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack({
						delta: Number(delta || 1)
					})
		 	} else {
					this.$navTo('pages/index/index')
				}
			},
			onNotLogin(type) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		padding: 28rpx 0;
		text-align: center;
	}

	.form_box {
		padding: 0 10%;

		.form_item {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #f4f8fc;
			align-items: center;
			padding: 24rpx 0;

			.avatar {
				width: 108rpx;
				height: 108rpx;
				border-radius: 100px;
				background-color: #f8f8f8;
			}

			.mask {
				width: 108rpx;
				height: 108rpx;
				border-radius: 100px;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 2;
				background: rgba($color: #000, $alpha: 0.2);
			}

			.avatar-wrapper {
				padding: 0;
				margin: 0;
				appearance: none;
				background: none;
				position: relative;
				text-align: right;

				.txt {
					position: absolute;
					left: 0;
					bottom: 0;
					right: 0;
					font-size: 24rpx;
					z-index: 2;
					line-height: 1.5;
					background: #fff;
					opacity: .5;
				}
			}

			.input {
				height: 88rpx;
				text-align: right;
				padding: 0 24rpx;
			}
		}
	}

	.agree {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.con {
			padding: 32rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.txt {
				margin-left: 12rpx;
			}

			u-icon {
				font-size: 38rpx;
			}

			.icon_check {
				color: #0080ff;
			}

			.icon {
				color: #909eb0;
			}

			.link {
				color: #0080ff;
			}
		}
	}

	.logo {
		border-radius: 24rpx;
		display: inline-block;
		margin-top: 64rpx;
	}

	.logo .xcx_logo {
		width: 128rpx;
		height: 128rpx;
		border-radius: 1000rpx;
	}

	.info {
		text-align: center;
		margin: 30rpx 15%;
		font-size: 32rpx;
	}

	.info .p {
		margin-top: 24rpx;
		color: #999;
	}

	.info .tit {
		font-weight: bold;
	}

	.btn_box {
		padding: 0 15%;
		margin-top: 32rpx;
	}

	.btn_box button {
		margin-bottom: 32rpx;
	}

	.btn_box .protocol {
		margin-top: 64rpx;
	}

	.tMask {
		position: fixed;
		left: 0;
		top: 0;
		text-align: center;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		z-index: 20;
	}

	.tMaskBox {
		position: absolute;
		left: 50%;
		top: 50%;
		background: #fff;
		border-radius: 18rpx;
		transform: translate(-50%, -50%);
		width: 80%;
	}

	.tMaskTitle {
		border-bottom: 1px solid #eee;
		padding: 30rpx;
	}

	.tMaskBoxCon {
		padding: 40rpx;
		font-size: 32rpx;
		color: #999;
	}

	.tMaskBoxImg {
		background: #eee;
		width: 100%;
		margin: 30rpx 0;
	}
</style>
